import React, { useEffect, useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import Highcharts3D from 'highcharts/highcharts-3d';
import { useTranslation } from 'react-i18next';
import moment from 'moment';

Highcharts3D(Highcharts);

const colorList = ['#0000ff', '#8d0073', '#ba0046', '#d60028', '#eb0014', '#fb0004', '#ff0000'];

const Logarithmic = ({
  statisticalCenterData
}) => {
  const { t } = useTranslation();

  const options = {
    chart: {
      style: {
          fontSize: '1em'
      },
    },
    title: {
      text: t('I responded to the quote'),
      align: 'left'
    },
  
    xAxis: {
      title: {
        text: 'Month'
      },
      categories: statisticalCenterData?.bid?.map(item => moment(item.date).format('MM'))
    },
  
    yAxis: {
      type: 'logarithmic',
      title: {
        text: ''
      }
    },
  
    tooltip: {
      headerFormat: '<b>{series.name}</b><br />',
      pointFormat: '{point.y} '
    },
  
    series: [{
      showInLegend: false,
      name: 'Internet Users',
      keys: ['y', 'color'],
      data:  statisticalCenterData?.bid?.map(item => [Number(item.count) || 0, colorList[Math.floor(Math.random() * (colorList.length - 1))]]),
      color: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 1,
          y2: 0
        },
        stops: [
          [0, '#0000ff'],
          [1, '#ff0000']
        ]
      }
    }],
    credits: {
      // 是否显示版权链接
      enabled: false
  }
  };

  return (
      <HighchartsReact
          highcharts={Highcharts}
          options={options}
      />
  );
};

export default Logarithmic;